/*
 * 通用样式文件
 * 定义项目中常用的变量、工具类和混合器
 */

// 引入 reset.less
@import "reset.less";

// 颜色变量
@primary-color: #1890ff;         // 主色调
@secondary-color: #722ed1;       // 辅助色
@success-color: #52c41a;         // 成功色
@warning-color: #faad14;         // 警告色
@error-color: #ff4d4f;           // 错误色
@dark-color: #1f2329;            // 深色
@gray-color: #86909c;            // 灰色
@light-color: #f2f3f5;           // 浅色
@white-color: #ffffff;           // 白色

// 字体变量
@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@font-size-base: 16px;           // 基础字体大小
@font-size-sm: 14px;             // 小字体大小
@font-size-lg: 18px;             // 大字体大小
@font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-bold: 600;

// 间距变量
@spacing-unit: 8px;              // 间距单位
@spacing-xs: @spacing-unit;      // 极小间距 (8px)
@spacing-sm: @spacing-unit * 2;  // 小间距 (16px)
@spacing-md: @spacing-unit * 3;  // 中等间距 (24px)
@spacing-lg: @spacing-unit * 4;  // 大间距 (32px)
@spacing-xl: @spacing-unit * 5;  // 极大间距 (40px)

// 边框变量
@border-radius-sm: 4px;          // 小边框圆角
@border-radius-md: 8px;          // 中等边框圆角
@border-radius-lg: 16px;         // 大边框圆角
@border-color: #e5e6eb;          // 边框颜色

// 阴影变量
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

// 动画变量
@transition-duration: 0.3s;      // 默认过渡时间
@transition-timing-function: ease-in-out; // 默认过渡函数

// 混合器 - 清除浮动
.mixin-clearfix() {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

// 混合器 - 文本截断
.mixin-text-ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 混合器 - 三角形
.mixin-triangle(@direction: down, @size: 10px, @color: #000) {
  width: 0;
  height: 0;
  
  .mixin-triangle-down() {
    border-left: @size solid transparent;
    border-right: @size solid transparent;
    border-top: @size solid @color;
  }
  
  .mixin-triangle-up() {
    border-left: @size solid transparent;
    border-right: @size solid transparent;
    border-bottom: @size solid @color;
  }
  
  .mixin-triangle-left() {
    border-top: @size solid transparent;
    border-bottom: @size solid transparent;
    border-right: @size solid @color;
  }
  
  .mixin-triangle-right() {
    border-top: @size solid transparent;
    border-bottom: @size solid transparent;
    border-left: @size solid @color;
  }
}

// 混合器 - 响应式断点
.mixin-responsive() {
  @media (max-width: 576px) {
    .mixin-respond-to-xs();
  }
  @media (min-width: 577px) and (max-width: 768px) {
    .mixin-respond-to-sm();
  }
  @media (min-width: 769px) and (max-width: 992px) {
    .mixin-respond-to-md();
  }
  @media (min-width: 993px) and (max-width: 1200px) {
    .mixin-respond-to-lg();
  }
  @media (min-width: 1201px) {
    .mixin-respond-to-xl();
  }
  
  .mixin-respond-to-xs() {}
  .mixin-respond-to-sm() {}
  .mixin-respond-to-md() {}
  .mixin-respond-to-lg() {}
  .mixin-respond-to-xl() {}
}

// 工具类 - 文本相关
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-bold { font-weight: @font-weight-bold; }
.text-light { font-weight: @font-weight-light; }
.text-muted { color: @gray-color; }
.text-primary { color: @primary-color; }
.text-success { color: @success-color; }
.text-warning { color: @warning-color; }
.text-error { color: @error-color; }
.text-white { color: @white-color; }

// 工具类 - 背景相关
.bg-primary { background-color: @primary-color; }
.bg-secondary { background-color: @secondary-color; }
.bg-success { background-color: @success-color; }
.bg-warning { background-color: @warning-color; }
.bg-error { background-color: @error-color; }
.bg-dark { background-color: @dark-color; }
.bg-gray { background-color: @gray-color; }
.bg-light { background-color: @light-color; }
.bg-white { background-color: @white-color; }

// 工具类 - 间距相关
.m-0 { margin: 0; }
.m-xs { margin: @spacing-xs; }
.m-sm { margin: @spacing-sm; }
.m-md { margin: @spacing-md; }
.m-lg { margin: @spacing-lg; }
.m-xl { margin: @spacing-xl; }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: @spacing-xs; }
.mt-sm { margin-top: @spacing-sm; }
.mt-md { margin-top: @spacing-md; }
.mt-lg { margin-top: @spacing-lg; }
.mt-xl { margin-top: @spacing-xl; }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: @spacing-xs; }
.mb-sm { margin-bottom: @spacing-sm; }
.mb-md { margin-bottom: @spacing-md; }
.mb-lg { margin-bottom: @spacing-lg; }
.mb-xl { margin-bottom: @spacing-xl; }

.ml-0 { margin-left: 0; }
.ml-xs { margin-left: @spacing-xs; }
.ml-sm { margin-left: @spacing-sm; }
.ml-md { margin-left: @spacing-md; }
.ml-lg { margin-left: @spacing-lg; }
.ml-xl { margin-left: @spacing-xl; }

.mr-0 { margin-right: 0; }
.mr-xs { margin-right: @spacing-xs; }
.mr-sm { margin-right: @spacing-sm; }
.mr-md { margin-right: @spacing-md; }
.mr-lg { margin-right: @spacing-lg; }
.mr-xl { margin-right: @spacing-xl; }

.p-0 { padding: 0; }
.p-xs { padding: @spacing-xs; }
.p-sm { padding: @spacing-sm; }
.p-md { padding: @spacing-md; }
.p-lg { padding: @spacing-lg; }
.p-xl { padding: @spacing-xl; }

.pt-0 { padding-top: 0; }
.pt-xs { padding-top: @spacing-xs; }
.pt-sm { padding-top: @spacing-sm; }
.pt-md { padding-top: @spacing-md; }
.pt-lg { padding-top: @spacing-lg; }
.pt-xl { padding-top: @spacing-xl; }

.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: @spacing-xs; }
.pb-sm { padding-bottom: @spacing-sm; }
.pb-md { padding-bottom: @spacing-md; }
.pb-lg { padding-bottom: @spacing-lg; }
.pb-xl { padding-bottom: @spacing-xl; }

.pl-0 { padding-left: 0; }
.pl-xs { padding-left: @spacing-xs; }
.pl-sm { padding-left: @spacing-sm; }
.pl-md { padding-left: @spacing-md; }
.pl-lg { padding-left: @spacing-lg; }
.pl-xl { padding-left: @spacing-xl; }

.pr-0 { padding-right: 0; }
.pr-xs { padding-right: @spacing-xs; }
.pr-sm { padding-right: @spacing-sm; }
.pr-md { padding-right: @spacing-md; }
.pr-lg { padding-right: @spacing-lg; }
.pr-xl { padding-right: @spacing-xl; }

// 工具类 - 布局相关
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: @spacing-md;
  padding-right: @spacing-md;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -@spacing-md;
  margin-right: -@spacing-md;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  padding-left: @spacing-md;
  padding-right: @spacing-md;
}

.col-1 { flex: 0 0 8.3333%; }
.col-2 { flex: 0 0 16.6667%; }
.col-3 { flex: 0 0 25%; }
.col-4 { flex: 0 0 33.3333%; }
.col-5 { flex: 0 0 41.6667%; }
.col-6 { flex: 0 0 50%; }
.col-7 { flex: 0 0 58.3333%; }
.col-8 { flex: 0 0 66.6667%; }
.col-9 { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.3333%; }
.col-11 { flex: 0 0 91.6667%; }
.col-12 { flex: 0 0 100%; }

// 工具类 - 定位相关
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

// 工具类 - 显示相关
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

// 工具类 - 弹性布局相关
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }
.align-content-start { align-content: flex-start; }
.align-content-end { align-content: flex-end; }
.align-content-center { align-content: center; }
.align-content-between { align-content: space-between; }
.align-content-around { align-content: space-around; }
.align-content-stretch { align-content: stretch; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }

// 工具类 - 其他
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.border { border: 1px solid @border-color; }
.border-top { border-top: 1px solid @border-color; }
.border-right { border-right: 1px solid @border-color; }
.border-bottom { border-bottom: 1px solid @border-color; }
.border-left { border-left: 1px solid @border-color; }
.border-radius-sm { border-radius: @border-radius-sm; }
.border-radius-md { border-radius: @border-radius-md; }
.border-radius-lg { border-radius: @border-radius-lg; }
.border-radius-full { border-radius: 9999px; }
.box-shadow-sm { box-shadow: @shadow-sm; }
.box-shadow-md { box-shadow: @shadow-md; }
.box-shadow-lg { box-shadow: @shadow-lg; }
.transition { transition: all @transition-duration @transition-timing-function; }
.hover-lift {
  transition: transform @transition-duration @transition-timing-function, box-shadow @transition-duration @transition-timing-function;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: @shadow-md;
  }
}  